<template>
  <div :class="ns.b()">
    <div :class="ns.e('page-title')">环保处罚大全</div>

    <div :class="ns.e('filter-container')">
      <div :class="ns.e('filter-row')">
        <div :class="ns.e('label')">关键词</div>
        <div :class="ns.e('items')">
          <filter-search :width="162" v-model="searchTxt" :show-title="false" placeholder="请输入企业名称" @enter="handlerInput" @clear="handlerInput" />
        </div>
      </div>
      <div :class="ns.e('filter-row')">
        <div :class="ns.e('label')">处罚类型</div>
        <div :class="ns.e('items')">
          <vc-multiple-select-flat :options="penaltyTypes" @submit="handleSubmit($event, 'penaltyTypes')" />
        </div>
      </div>
      <div :class="ns.e('filter-row')">
        <div :class="ns.e('label')">环境违法行为</div>
        <div :class="ns.e('items')">
          <vc-multiple-select-flat :options="environmentViolations" @submit="handleSubmit($event, 'environmentViolations')" />
        </div>
      </div>
      <div :class="[ns.e('filter-row'), ns.e('filter-row-menus')]">
        <div :class="ns.e('label')">更多筛选</div>
        <div :class="ns.e('items')">
          <vc-filter :menus="menus">
            <div :class="ns.e('total-num')">
              共计
              <sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>
              条
          </div>
          </vc-filter>
        </div>
      </div>
    </div>

    
    <div :class="ns.e('table-wrapper')">
      <vc-table
        :loading="loading"
        :tableData="tableData"
        :columns="columns"
        :total="totalNum"
        :pageSize="queryData.pageSize"
        v-model:pageNum="queryData.pageNum"
        :defaultSort="{ field: 'noticeDate', order: 'desc' }"
        :nodataType="overLimit ? 205 : 200"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from 'vc/src/use';
import FilterSearch from '@/components/page-search/index.vue';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { usePage } from '@/use/usePage';
import { getPenalty } from '../apis';

const ns = /* hoist-static*/ useNamespace('environmentPenalties');
defineOptions({ name: ns.b() });
const route = useRoute();
const new_searchTxt= route.query?.key;
const { queryData, penaltyTypes, environmentViolations, menus } = useScreen(new_searchTxt);
console.log(queryData);
const handleSubmit = (val: string, type: string) => {
  if (type === 'penaltyTypes') {
    queryData.penaltyResultCode = val;
  }
  if (type === 'environmentViolations') {
    queryData.environmentPenaltyCode = val;
  }
};

const { tableData, columns } = useTable();

const overLimit = ref(false);

const { loading, run } = useRequest(getPenalty, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    if (res.code === 200) {
      totalNum.value = res.data.total;
      tableData.value = res.data.values;
    }
    if (res.code === 100006) {
      overLimit.value = true;
    }
  }
});

const { totalNum, searchTxt, handlerInput, handleCurrentChange, sortChange } = usePage(queryData, run);
</script>

<style lang="scss" scoped>
@import './index.scss';

:deep(.el-checkbox__input.is-checked .el-checkbox__inner ) {
  background-color: #02C680;
  border-color: #02C680;
}

:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
  color: #02C680;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #02C680;
  border-color: #02C680;
}

:deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
  border-color: #E3E3E3;
}
:deep(.el-checkbox__input .el-checkbox__inner) {
  &:hover{
    border-color: #02C680;
  }
}

</style>
